<template>  
    <view class="container" style="">  
		<view style="display: flex; background: #fff;box-sizing: border-box; padding: 10px;">
			<image style="width: 80px; height: 80px;" :src="baseUrl.baseUrl+img"></image>
			<view style="margin-left: 20px; line-height: 40px;">
				<view style="font-size: 14px; font-weight: bold;">
					美亿联免单节
				</view>
				<view style="color: #E18D08; font-size: 20px;">
					<text style="font-size: 14px;">￥</text>{{payamount}}
				</view>
			</view>
		</view>
		<view style=" background: #fff; display: flex; padding:20px 10px; margin-top: 10px;box-sizing: border-box;">
			<view>
				订单金额
			</view>
			<view style="margin-left: auto; color: #E18D08;">
				￥{{payamount}}
			</view>
		</view>
		<view style=" background: #fff;margin-top: 10px;">
			<view style="box-sizing: border-box; display: flex; padding: 20px 10px;border-bottom: #eee solid 1px; ">
				<view>
					<u-icon color="#62b900" name="weixin-fill"></u-icon> <text style="margin-left: 10px;">微信</text> 
				</view>
				<view style="margin-left: auto;">
					<radio checked="true" style="transform:scale(0.7)" color="#E18D08"></radio>
				</view>
			</view>
			<view style="box-sizing: border-box; display: flex; padding:20px 10px; ">
				<view>
					买家留言:
				</view>
				<view>
					<input type="text" v-model="remark" placeholder="您对本次交易的说明" />
				</view>
			</view>
		</view>
		<view style="position: fixed; z-index: 1; background: #fff; padding: 20px 0 ; width: 100%; bottom: 0; left: 0;">
			<view class="t-login">
				<button @click="pay">去支付</button>
			</view>
		</view>
		
    </view>  
</template>  
<script>  
	import baseUrl from '@/common/request/config.js'
	import listCell from '@/components/mix-list-cell';
    import {  
        mapState, mapActions
    } from 'vuex';  
	let startY = 0, moveY = 0, pageAtTop = true;
    export default {
		components: {
			listCell
		},
		data(){
			return {
				coverTransform: 'translateY(0px)',
				coverTransition: '0s',
				moving: false,
				viewList: [],
				appVersion: 0,
				img:'',
				payamount:'',
				baseUrl:baseUrl,
				remark:'',
				openid:'',
			}
		},
		onLoad(e){
			this.img=e.img
			this.payamount=e.payamount
			// if(uni.getStorageSync('token')){
			// 	uni.navigateTo({
			// 		url:`/pagesuser/user/orders?img=${img}&payamount=${payamount}`
			// 	})
			// }else{
			// 	uni.showToast({
			// 		title: '请登录后操作',
			// 		icon: 'none'
			// 	})
			// 	setTimeout(()=>{
			// 		uni.navigateTo({
			// 			url:`/pagesuser/public/login?id=${this.userid}&phone=${this.phone}`
			// 		})	
			// 	},1000)
			// }
			uni.login({
			    success: res_login => {
			        console.log('-------获取code-------')
			        console.log(res_login);
					// https://api.weixin.qq.com/sns/jscode2session?appid=wxa7fb126763b982c8&secret=e87c7a0d00f28fa0e21635c64d2faef5&js_code=091aGKGa1r0zIC0Sy9Ha1bQkHk3aGKGt&grant_type=authorization_code
					// return false
					this.$http.post('getOpenIdByCode',{code:res_login.code}).then(res => {
						if(res.code==1){
							console.log(res)
							this.openid=res.data
							// this.wxpay(res.data.timeStamp,res.data.nonceStr,res.data.package,res.data.signType,res.data.paySign)
						}
					}).catch(e => {
					})
			    }
			});
		},
        computed: {
			
		},
        methods: {
			wxpays(Stamp,nonceStrs,packages,signTypes,paySigns,appIds){
				uni.requestPayment({
					provider:'wxpay',
					timeStamp:Stamp,
					nonceStr:nonceStrs,
					package:packages,
					signType:signTypes,
					paySign:paySigns,
					appId:appIds,
					success:res=>{
						var user=uni.getStorageSync('userinfo')
						user.is_members=1
						uni.setStorageSync('userinfo',user)
						uni.navigateTo({
							url:'./payok'
						})
					},fail(err) {
							showTips('支付失败')
							setTimeout(() => { //支付失败跳转
								// callback()
							})
						}
				})
			},
			pay(){
				this.$http.post('toPay',{remark:this.remark,openid:this.openid}).then(ress => {
					console.log(ress)
					// if(ress.code==1){
						console.log(ress.data.payinfo,'ffff')
						this.wxpays(ress.data.payinfo.timeStamp,ress.data.payinfo.nonceStr,ress.data.payinfo.package,ress.data.payinfo.signType,ress.data.payinfo.paySign,ress.data.payinfo.appId)
						
					// }
				}).catch(e => {
					console.log(e,'333333333')
				})
				
				
				
				
				
				// toPay
				// uni.navigateTo({
				// 	url:'./payok'
				// })
			},
		},
		onShow() {
			
		},
		
		onPullDownRefresh() {
			// this.init().then(e => {
			// 	uni.stopPullDownRefresh()
			// }).catch(e => {
			// 	uni.stopPullDownRefresh()
			// })
		}
    }  
</script>  
<style lang='scss'>
	page{background: #F0F0F0;}
	%flex-center {
	 display:flex;
	 flex-direction: column;
	 justify-content: center;
	 align-items: center;
	}
	%section {
	  display:flex;
	  justify-content: space-around;
	  align-content: center;
	  background: #fff;
	  border-radius: 10upx;
	}
	.list-cell {
		display:flex;
		align-items:baseline;
		padding: 20upx $page-row-spacing;
		line-height:60upx;
		position:relative;
		background: #fff;
		justify-content: center;
		&.log-out-btn{
			margin-top: 40upx;
			.cell-tit{
				color: $uni-color-primary;
				text-align: center;
				margin-right: 0;
				font-size: $font-base + 6upx;
			}
		}
	}
	.user-section{
		height: 520upx;
		padding: 100upx 30upx 0;
		position:relative;
		.bg{
			position:absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			filter: blur(1px);
			opacity: .7;
		}
	}
	.user-info-box{
		height: 180upx;
		display:flex;
		align-items:center;
		position:relative;
		z-index: 1;
		.portrait{
			width: 130upx;
			height: 130upx;
			border:5upx solid #fff;
			border-radius: 50%;
		}
		.info-box {
			display: flex;
			flex-direction: column;
		}
		.username{
			font-size: $font-lg + 6upx;
			color: $font-color-dark;
			margin-left: 20upx;
		}
		.info-tips {
			font-size: $font-base;
			color: $base-color;
			margin-left: 20upx;
		}
	}

	.vip-card-box{
		display:flex;
		flex-direction: column;
		color: #f7d680;
		height: 240upx;
		background: linear-gradient(left, rgba(0,0,0,.7), rgba(0,0,0,.8));
		border-radius: 16upx 16upx 0 0;
		overflow: hidden;
		position: relative;
		padding: 20upx 24upx;
		.card-bg{
			position:absolute;
			top: 20upx;
			right: 0;
			width: 380upx;
			height: 260upx;
		}
		.b-btn{
			position: absolute;
			right: 20upx;
			top: 16upx;
			width: 132upx;
			height: 40upx;
			text-align: center;
			line-height: 40upx;
			font-size: 22upx;
			color: #36343c;
			border-radius: 20px;
			background: linear-gradient(left, #f9e6af, #ffd465);
			z-index: 1;
		}
		.tit{
			font-size: $font-base+2upx;
			color: #f7d680;
			margin-bottom: 28upx;
			.yticon{
				color: #f6e5a3;
				margin-right: 16upx;
			}
		}
		.e-b{
			font-size: $font-sm;
			color: #d8cba9;
			margin-top: 10upx;
		}
	}
	.cover-container{
		background: $page-color-base;
		margin-top: -150upx;
		padding: 0 30upx;
		position:relative;
		background: #f5f5f5;
		padding-bottom: 20upx;
		.arc{
			position:absolute;
			left: 0;
			top: -34upx;
			width: 100%;
			height: 36upx;
		}
	}
	.tj-sction{
		@extend %section;
		.tj-item{
			@extend %flex-center;
			flex-direction: column;
			height: 140upx;
			font-size: $font-sm;
			color: #75787d;
		}
		.num{
			font-size: $font-lg;
			color: $font-color-dark;
			margin-bottom: 8upx;
		}
	}
	.order-section{
		@extend %section;
		padding: 28upx 0;
		margin-top: 20upx;
		.order-item{
			@extend %flex-center;
			width: 120upx;
			height: 120upx;
			border-radius: 10upx;
			font-size: $font-sm;
			color: $font-color-dark;
		}
		.iconfont{
			font-size: 48upx;
			margin-bottom: 18upx;
			color: #fa436a;
		}
		.icon-shouhoutuikuan{
			font-size:44upx;
		}
	}
	.history-section{
		padding: 30upx 0 0;
		margin-top: 20upx;
		background: #fff;
		border-radius:10upx;
		.sec-header{
			display:flex;
			align-items: center;
			font-size: $font-base;
			color: $font-color-dark;
			line-height: 40upx;
			margin-left: 30upx;
			.iconfont{
				font-size: 44upx;
				color: #5eba8f;
				margin-right: 16upx;
				line-height: 40upx;
			}
		}
		.h-list{
			white-space: nowrap;
			padding: 30upx 30upx 0;
			image{
				display:inline-block;
				width: 160upx;
				height: 160upx;
				margin-right: 20upx;
				border-radius: 10upx;
			}
		}
	}
	.bq-selection {
	    padding: 15px 0 0;
		margin-top: 10px;
		border-radius: 5px;
		display: flex;
		flex-direction: column;
		align-items: center;
		color: #888;
		font-size: $font-base;
	}
</style>